既然昨天提到了各種不同的素材格式，那最重要的是我們的素材要從哪邊找到，就以一個錢包或者是收藏庫來說我們可以先借用 Opensea 的 API ，來協助我們取得 NFT 相關的資訊以及圖像 or 媒體素材

首先我們先至 測試網 （testnets）
https://testnets.opensea.io/

尋找一位好野人收藏家的帳號
https://testnets.opensea.io/0x5eECf513518EfB76d35Cab1A6c32f4558F415D16

由於主網的API需要申請權限，其中的審核手續十分複雜因此我們將使用測試網 (testnets-api)
文件與連結在此 測試網API

使用 retrieving-assets API 列出使用者所擁有的財產

接下來讓我們製作出現這樣的畫面

步驟

1. 先使用 API 取得 owner （0x5eECf513518EfB76d35Cab1A6c32f4558F415D16） 此 address 之下的所有 assets

2. 藉由 步驟一 中的 assets 資料，擷取我們想顯示的部分

{
          id: item.id,
          name: item.name,
          imageUrl: item.image_preview_url,
          tokenId: item.token_id,
          contractSchema: item.asset_contract.schema_name,
          collectionName: item.collection.name,
          backgroundColor: item.background_color,
          contractAddress: item.asset_contract.address,
}

3. 規畫版面 這邊使用 Next.js + chakra-ui + Tailwind CSS

chakra-ui 相關教學可以參考 indexhui 大大的挑戰
https://ithelp.ithome.com.tw/users/20151365/ironman/5227

Tailwind CSS 相關教學可以參考 Tim Hsu 與 huibizhang 兩位大大去年的文章
https://ithelp.ithome.com.tw/users/20119300/ironman/3948
https://ithelp.ithome.com.tw/users/20138853/ironman/3928

如果有不懂的地方可以偷看完成的DEMO